<template>
    <div>
        <nav id="demo">
            <div  @click="codes" class="home">  <i class="fa fa-qrcode" aria-hidden="true"></i></div>
            <div class="home"> 微句</div>
            <div  @click="channel" class="home">频道 </div>
        </nav>
        <!-- <navHead></navHead> -->
        <main>
            <homeContent></homeContent> 
        </main>
        <!-- 二维码 -->
            <popup  :show-mask="false" v-model="codeIsShow" position="right" style="width:100vw;" >
            <div>
                <qBcodes @goHome='cancelQr'></qBcodes>
            </div>
            </popup>
       
         
        <!-- 频道 -->
        <popup :show-mask="false" v-model="channelIsShow" position="right" style="width:100vw;" >
            <div>
                <channel @channelGo='channelGo'></channel>
            </div>
        </popup>
    </div>
</template>

<script>
import qBcodes from '../components/qBcodes'
import channel from '../components/channel/channel'
import homeContent from '../components/home/homeContent'
import navHead from '../components/home/navHead'
export default {
    data() {
        return {
            codeIsShow:false,
            channelIsShow:false
        }
    },
    methods: {
        codes:function() {
            this.codeIsShow = true
            $('.weui-tabbar').hide()
        },
        cancelQr:function() {
            this.codeIsShow = false
        },
        channelGo:function(){
            this.channelIsShow = false
        },
        channel:function() {
           // console.log('aaa')
            this.channelIsShow = true
             $('.weui-tabbar').hide()
        },
        qRcodesGohome: function(data) {
            console.log('codes')
            console.log(data)
        },
        
        // discroll: function() {
        //     var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        //     var navHead = document.getElementById('demo')
        //   if(scrollTop >=0.000000000000000000000000000000000000000000000000000000000000000000000000000000001) {
        //         navHead.style.position = 'fixed'
        //         navHead.style.backgroundColor = '#09bb07'
        //          navHead.style.top = '0'
        //          navHead.style.zIndex = '1000'
        //     }else {
        //         navHead.style.position = 'relative'
        //     }
        // }
    },
    components:{
        channel,
        homeContent,
        navHead,
        qBcodes,
    },
    mounted() {
        window.onscroll =  this.discroll
    },
}
</script>

<style scoped>
nav{
    width: 100vw;
    display: flex;
    justify-content: space-between;
    background-color: #09bb07;
    height: 13vw;
    line-height: 13vw;
    padding: 0 3vw;
    box-sizing: border-box;

    /* position: fixed; */

    /* position: sticky; */
    /* -webkit-position:sticky; */
     /* z-index: 900;
      top: 0vw; */
}

.home{
    color: white;
}
.home>i{
    font-size: 6vw;
}
</style>
